<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Data数据对象</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>{{message}}</h1>
			<span>{{dog.name}}  {{dog.age}}</span>
			<br>
			<span>{{animal[0]}}</span>
			<span>{{animal[2]}}</span>
		</div>
		
		<script>
			
			// Vue 中用到的数据定义在data 中
			// data 中可以写复杂类型的数据
			// 渲染复杂类型的数据时，遵从 js 语法即可
			
			var vm = new Vue({
				el:'#app',
				data:{
					message: 'data数据对象示例',
					dog:{
						name: '旺财',
						age: 2
					},
					animal:["狗","猫", "兔子"]
				}
				
			});
			
		</script>
	</body>
</html>
